//输入框
@inputborder:1px solid #1961cb; //输入框边框、下拉框边框颜色
@inputborderRadius: 18px; //输入框圆角
@inputBackgroundColor: transparent; //输入框背景色
@inputBoxShadow: none; //输入框阴影
@inputIconColor: #30a6fa; //输入框中图标颜色

// 下拉框(时间框、下拉框、等)
@selectBackgroundColor: #1148ac; //下拉框背景颜色
@selectItemColor: #ffff; //下拉框选中的字体颜色
@selectItemNotColor: rgba(255, 255, 255, 0.6); //下拉框未选中字体颜色
@selectItemBackgroundColorHover: rgb(13, 37, 106); // 下拉框 & 输入框
// 时间框
@dateItemColor: #c1fdff; //今日日期高亮颜色
/* element 输入框样式 */
.el-input {
  .el-input__inner {
    border: @inputborder;
    border-radius: @inputborderRadius;
    background-color: @inputBackgroundColor;
    box-shadow: @inputBoxShadow !important;
    &:hover {
      box-shadow: @inputBoxShadow !important;
    }
    // &:focus {
    // 该点击隐藏 阴影 需在对应模块中使用
    // 在此使用不生效
    //   box-shadow: @inputBoxShadow !important;
    // }
  }
  .el-input__prefix,
  .el-input__suffix {
    color: @inputIconColor;
  }
}
.el-textarea {
  .el-textarea__inner {
    border: @inputborder;
    border-radius: @inputborderRadius;
    background-color: @inputBackgroundColor;
    box-shadow: @inputBoxShadow !important;
    &:hover {
      box-shadow: @inputBoxShadow !important;
    }
    // &:focus {
    // 该点击隐藏 阴影 需在对应模块中使用
    // 在此使用不生效
    //   box-shadow: @inputBoxShadow !important;
    // }
  }
  .el-input__prefix,
  .el-input__suffix {
    color: @inputIconColor;
  }
}

/* element 下拉框样式(时间框、下拉框、等) */
.el-popper {
  background-color: @selectBackgroundColor !important;
  border: @inputborder !important;
  .el-select-dropdown__item {
    color: @selectItemNotColor !important;
    box-shadow: @inputBoxShadow !important;
    &:hover {
      background-color: @selectItemBackgroundColorHover;
    }
  }
  .hover {
    //   下拉框 鼠标悬停颜色
    background-color: @selectItemBackgroundColorHover;
  }
  .selected {
    //   下拉框 选中的样式
    background-color: @selectItemBackgroundColorHover;
    color: @selectItemColor !important;
  }
  .el-popper__arrow::before {
    //  下拉框 样式(箭头)
    background-color: @selectBackgroundColor !important;
    border: @inputborder !important;
  }

  // 日期-下拉的样式
  .el-picker-panel__body {
    background-color: @selectBackgroundColor !important;
    border: @inputborder !important;
    * {
      // 字体颜色
      color: @selectItemColor;
    }
    .current {
      //日期框 date类型 选中的样式
      .el-date-table-cell__text {
        background-color: @selectItemBackgroundColorHover!important;
      }
    }
    .today {
      .el-date-table-cell__text {
        //日 今日 日期 高亮颜色
        color: @dateItemColor !important;
      }
      .cell {
        //月 今日 日期 高亮颜色
        color: @dateItemColor !important;
      }
    }
    .cell {
      //日期框 month类型 未选中的样式
      color: @selectItemColor;
    }
    .el-date-table.is-week-mode .el-date-table__row:hover .el-date-table-cell {
      // 日期框  week类型 hover样式
      background-color: @selectItemBackgroundColorHover;
    }
  }
}
/* element 多选框样式 */
.el-checkbox {
  .el-checkbox__input {
    // 多选选框未选中的样式
    .el-checkbox__inner {
      width: 18px;
      height: 18px;
      background-color: transparent !important;
      border-color: #387bc8 !important;
      &::after {
        transform: rotate(39deg) translateX(2px) scaleX(1.5) scaleY(1.5) !important;
        border: none;
      }
    }
  }
  .el-checkbox__label {
    // 多选框文字样式
    font-size: 20px;
    color: #79caff;
    font-weight: bold;
  }
  .is-checked {
    // 多选选框选中的样式(不包含√号)
    .el-checkbox__inner::after {
      border: 2px solid #37c6fe !important;
      color: #79caff;
      border-left: 0 !important;
      border-top: 0 !important;
    }
  }
}
